<template>
  <div class="phone-wrap">
    <div class="conter">
      <div class="phone-show">
        <ul class="phone-left">
          <li>
            <img
              :src="$target + 'public/imgs/appliance/appliance-promo1.png'"
            />
          </li>
          <li>
            <img
              :src="$target + 'public/imgs/appliance/appliance-promo2.png'"
            />
          </li>
        </ul>
        <ul class="phone-right">
          <li v-for="data in tvList" :key="data.product_id">
            <router-link
              :to="{
                path: '/goods/attr',
                query: {
                  productID: data.product_id
                }
              }"
            >
              <img :src="$target + data.product_picture" />
              <h2>{{ data.product_name }}</h2>
              <h3>{{ data.product_title }}</h3>
              <p>
                <span>{{ data.product_price }}</span>
                <em class="price">{{ data.product_selling_price }}</em>
              </p>
            </router-link>
          </li>
          <li class="more">
            <a href="javascript:;">
              浏览更多 <i class="el-icon-d-arrow-right"></i
            ></a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DFloor',
  props: ['dataList'],
  data() {
    return {
      tvList: []
      // accessoryHotList: []
    }
  },
  watch: {
    dataList(newval) {
      console.log(newval)
      this.tvList = newval
    }
  }
}
</script>

<style lang="less" scoped>
.phone-wrap {
  width: 100%;

  .conter {
    width: 1225px;
    margin: 0 auto;

    .phone-show {
      display: flex;

      .phone-left {
        li {
          &:hover {
            box-shadow: 0 15px 30px rgb(0 0 0 / 10%);
            transform: translate3d(0, -2px, 0);
          }
          img {
            width: 234px;
            height: 300px;
            padding-bottom: 10px;
          }
        }
      }
      .phone-right {
        display: flex;
        flex-wrap: wrap;
        li {
          width: 234px;
          margin: 0 0 14.5px 13.7px;
          text-align: center;
          padding: 10px 0;
          background-color: white;
          transition: all 0.2s linear;
          &:hover {
            box-shadow: 0 15px 30px rgb(0 0 0 / 10%);
            transform: translate3d(0, -2px, 0);
          }
          a {
            img {
              width: 160px;
              height: 160px;
              margin: 0 37px;
            }
            h2 {
              margin: 25px 10px 0;
              text-align: center;
              font-size: 14px;
              color: #333;
            }
            h3 {
              margin: 5px 10px;
              text-align: center;
              color: #b0b0b0;
              font-size: 12px;
            }
            p {
              margin: 10px;
              text-align: center;
              font-size: 16px;
              color: #ff6700;
              .price {
                margin-left: 8px;
                color: #b0b0b0;
                text-decoration: line-through;
              }
            }
          }
        }
        .more {
          font-size: 18px;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #333333 !important;
        }
      }
    }
  }
}
</style>
